<html>
<head>
    <meta charset="UTF-8">
    <title>Drag Drop Tree Nodes - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script language="javascript" type="text/javascript"></script>
</head>
<body>
    <h2>Drag Drop Tree Nodes<input type="button" onclick="enableDragg();" value="允许拖动" /><input type="button" onclick="    disableDragg();" value="禁止拖动" /></h2>
    <p>Press mouse down and drag a node to another position.</p>
    <div style="margin: 20px 0;"></div>
    <div class="easyui-panel" style="padding: 5px">
        <ul class="easyui-tree" data-options="url:'/module/o2pa',method:'get',animate:true,dnd:false" id="tree"></ul>
    </div>
    <div id="drop" style="height: 200px; border: 1px green solid; margin-top: 5px;"></div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $('#drop').droppable({
            onDrop: function (e, source) {
                var node = $('#tree').tree('getNode', source);
                $(this).append("<div>node.id:" + node.id + ", node.text:" + node.text + "</div>");
            }
        });
 
        $('#tree').on({
            mouseover: function (e) {
                var target = e.target;
                if (target.tagName == 'SPAN') target = target.parentNode;
                $(target).draggable({
                    revert: true,
                    proxy: 'clone',
                    disabled: false
                })
            },
            click: function (e) {
                var target = e.target;
                if (target.tagName == 'SPAN') target = target.parentNode;
                if (target.tagName == 'LI') target = $(target).find('div:first')[0];
                $(this).tree('toggle',target);
            }
        });
    });
</script>
